<template>
	<view class="content">
		<view class="bgImg">
			<image src="https://img.js.design/assets/img/645a6a9c8569fc84610a0623.png" mode="widthFix"></image>
		</view>

		<!-- 咨询 -->
		<view class="Mes">
			<view class="title">
				校园资讯
			</view>
			<!-- nav导航 -->
			<view class="navList">
				<view class="nav active">
					通知公告
				</view>
				<view class="nav">
					校园要闻
				</view>
			</view>
			<!-- messageInfo -->
			<view class="mesInfoList">
				<view class="mesInfoItem" v-for="item in shouldMes">
					<view class="mesItemTitle">
						{{ item.title }}
					</view>
					<view class="mesItemText">
						{{ item.content }}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		shouldMes
	} from "@/static/mock.js"
</script>

<style lang="scss" scoped>
	.content {
		position: relative;

		.bgImg {
			width: 100%;
			height: 531px;
			overflow: hidden;

			image {
				width: 100%;
			}
		}

		// 资讯
		.Mes {
			width: 100%;
			padding: 28rpx 20rpx;
			background-color: #e8efff;
			box-sizing: border-box;
			// margin-top: -300rpx;
			position: absolute;
			top: 550rpx;
			border-radius: 53px 53px 0px 0px;

			.title {
				text-align: center;
				font-size: 32rpx;
				color: #565656;
			}

			// nav 导航
			.navList {
				display: flex;
				margin-top: 40rpx;
				margin-bottom: 24rpx;

				.nav {
					margin-right: 64rpx;
					font-size: 24rpx;
					font-weight: bold;
				}

				.nav.active {
					color: #244caa;
				}
			}

			// 通知
			.mesInfoList {
				.mesInfoItem {
					background-color: white;
					border-radius: 42rpx;
					box-sizing: border-box;
					padding: 40rpx 20rpx;
					margin-bottom: 20rpx;

					// 通知标题
					.mesItemTitle {
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 28rpx;
					}

					// 通知内容
					.mesItemText {
						font-size: 24rpx;
						font-weight: 400;
						line-height: 42rpx;
					}
				}
			}

		}
	}
</style>